<!--
 * @Description:简易日历
 * @Author: Sun
 * @Date: 2019-07-01 20:05:50
 * @LastEditors: Sun
 * @LastEditTime: 2019-07-01 22:12:28
 -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>简易日历</title>
	<style>
		#div input.active{background: yellow;}
		#divmo{width: 200px; height: 200px;background: #F1F1F1;}
		#divmo >div{display: none; width: 100%; height: 200px;}
		#divmo >div:first-child{display: block;}
	</style>
	<script>
		window.onload = function () {
		  var div1 = document.getElementById("div")
		  var abtn = div1.getElementsByTagName("input")
			var divmo = document.getElementById("divmo")
		  var adiv = divmo.getElementsByTagName("div")
	    for (let i = 0; i < abtn.length; i++) {
				abtn[i].index=i;
	    	abtn[i].onclick=function(){
					for (let i = 0; i < abtn.length; i++) {
						 abtn[i].className='';
						 adiv[i].style.display='none';
					}
					this.className='active';
					adiv[this.index].style.display='block';
				}
	    }
		}
	</script>
</head>

<body>



</body>

</html>